<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Not Found</title>
    <style>
        body, html {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        body {
            background-color: #111;
            color: #fff;
            font-family: 'Arial', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        h1 {
            font-size: 8em;
            margin: 0;
            text-align: center;
        }

        p {
            font-size: 1.5em;
            text-align: center;
        }

        .block {
            position: absolute;
            opacity: 0;
            z-index: -1; /* 积木在底部 */
        }

        #blocksContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 防止积木影响鼠标事件 */
        }

        /* 正方形 */
        .square {
            width: 20px;
            height: 20px;
            background-color: #f7d200;
            border-radius: 4px;
        }

        /* 圆形 */
        .circle {
            width: 20px;
            height: 20px;
            background-color: #00ff00;
            border-radius: 50%;
        }

        /* 三角形 */
        .triangle {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 17.3px solid #ff00ff; /* 边长为20px的等边三角形 */
        }
    </style>
</head>
<body>

<h1 id="text">404</h1>
<p id="subtext">Page Not Found</p>
<div id="blocksContainer"></div>

<script src="https://unpkg.com/gsap@3.9.0/dist/gsap.min.js"></script>
<script>
    // Ensure GSAP is loaded before running the animation
    gsap.registerPlugin();

    gsap.set("#text", { opacity: 0, scale: 0.5 });
    gsap.set("#subtext", { opacity: 0, y: 20 });

    gsap.to("#text", { opacity: 1, scale: 1, duration: 1, ease: "elastic.out(1, 0.3)" });
    gsap.to("#subtext", { opacity: 1, y: 0, duration: 1, ease: "elastic.out(1, 0.3)", delay: 0.5 });

    const blocksContainer = document.getElementById("blocksContainer");
    const numberOfBlocks = 50;
    const blockWidth = 20;
    const blockHeight = 20;
    const numRows = Math.ceil(window.innerHeight / blockHeight);

    function createBlock() {
        const block = document.createElement("div");
        block.className = "block";
        setRandomShape(block);
        blocksContainer.appendChild(block);

        gsap.set(block, { x: Math.random() * document.documentElement.clientWidth, y: -20 });
        gsap.to(block, {
            opacity: 1,
            y: window.innerHeight - (Math.floor(blocksContainer.children.length / numRows) + 1) * blockHeight,
            duration: Math.random() * 2 + 2,
            delay: Math.random() * 2,
            repeat: -1,
            ease: "power1.inOut",
        });
    }

    function setRandomShape(block) {
        const shapes = ["square", "circle", "triangle"];
        const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
        block.classList.add(randomShape);
    }

    for (let i = 0; i < numberOfBlocks; i++) {
        createBlock();
    }

    document.addEventListener("mousemove", () => {
        gsap.to(".block", {
            x: function() {
                return Math.random() * document.documentElement.clientWidth;
            },
            y: function() {
                return Math.random() * window.innerHeight;
            },
            duration: 0.1, // 减小动画时间以便更快触发
            ease: "power2.out",
        });
    });
</script>

</body>
</html>